<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>P118 动手实践，表单生成器</title>
    <style>
        body {
            margin-top: 20px;
        }

        .box {
            font-family: Tahoma, simsun;
            font-size: 12px;
            border: 1px solid #1678BE;
            display: table;
            margin: 0 auto;
        }

        .box-head {
            padding: 5px 20px;
            background-color: #2487C9;
            color: #fff;
            font-size: 14px;
        }

        .box-body {
            padding: 10px 20px;
        }

        .box-body th {
            font-weight: normal;
            vertical-align: top;
            padding-top: 5px;
        }

        .box-body td {
            padding-top: 2px;
            padding-bottom: 8px;
        }

        .box-body select {
            font-family: Tahoma, simsun;
            font-size: 12px;
            padding: 2px 5px;
            cursor: pointer;
        }

        .box-body label {
            margin-right: 5px;
            cursor: pointer;
        }

        .box-body label input {
            cursor: pointer;
        }

        .box-body input {
            vertical-align: middle;
            font-family: Tahoma, simsun;
            font-size: 12px;
        }

        .box-body input[type=text] {
            padding: 2px;
        }

        .box-body input[type=radio] {
            margin-top: -1px;
        }

        .box-body input[type=submit] {
            padding: 4px 15px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box-head">个人信息</div>
        <div class="box-body">
            <form id="form" action="form.php" method="post"></form>
        </div>
    </div>
    <script>
        (function (window) {
            var FormBuilder = function (data) {
                this.data = data;
            };
            FormBuilder.prototype.create = function () {
                var html = '';
                for (var k in this.data) {
                    var item = { tag: '', text: '', attr: {}, option: null };
                    for (var n in this.data[k]) {
                        item[n] = this.data[k][n];
                    }
                    html += builder.toHTML(item);
                }
                return '<table>' + html + '</table>';
            };
            var builder = {
                toHTML: function (obj) {
                    var html = this.item[obj.tag](this.attr(obj.attr), obj.option);
                    return '<tr><th>' + obj.text + '</th><td>' + html + '</td></tr>';
                },
                attr: function (attr) {
                    var html = '';
                    for (var k in attr) {
                        html += k + '="' + attr[k] + '" ';
                    }
                    return html;
                },
                item: {
                    input: function (attr, option) {
                        var html = '';
                        if (option === null) {
                            html += '<input ' + attr + '>';
                        } else {
                            for (var k in option) {
                                html += '<label><input ' + attr + 'value="' + k + '"' + '>' + option[k] + '</label>';
                            }
                        }
                        return html;
                    },
                    select: function (attr, option) {
                        var html = '';
                        for (var k in option) {
                            html += '<option value="' + k + '">' + option[k] + '</option>';
                        }
                        return '<select ' + attr + '>' + html + '</select>';
                    },
                    textarea: function (attr) {
                        return '<textarea ' + attr + '></textarea>';
                    }
                }
            };
            window['FormBuilder'] = FormBuilder;
        })(window);
    </script>
    <script>
        var elements = [
            { tag: 'input', text: '姓　　名：', attr: { type: 'text', name: 'user' } },
            { tag: 'input', text: '性　　别：', attr: { type: 'radio', name: 'gender' }, option: { m: '男', w: '女' } },
            { tag: 'input', text: '爱　　好：', attr: { type: 'checkbox', name: 'hobby[]' }, option: { swimming: '游泳', reading: '读书', running: '跑步' } },
            { tag: 'select', text: '住　　址：', attr: { name: 'area' }, option: { '': '--请选择--', bj: '北京', sh: '上海', sz: '深圳' } },
            { tag: 'textarea', text: '自我介绍：', attr: { name: 'introduce', cols: '50', rows: '5' } },
            { tag: 'input', attr: { type: 'submit', value: '提交' } }
        ];
        document.getElementById('form').innerHTML = new FormBuilder(elements).create();
    </script>
    <a href="../首页/page05.html">
        <h2>返回上一页面</h2>
    </a>
</body>

</html>